<!doctype html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<%@ include file="/commons/basejs.jsp" %>
  <meta charset="UTF-8">
  <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>意匠集报名</title>
    <link rel="stylesheet" href="/static/miind/css/common.css">
	<link rel="stylesheet" href="/static/miind/css/sign-up.css">
<div id="page" class="page-min-width page-with-header" style="display: block;">
    <div id="header" style="left: 0;">
        <img src="/static/miind/images/signupbg.jpg" alt="">
    </div>
    <div class="wrapper" style="width: 1244px;">
    	 <form method="post" action="/miiiind/save" id="edit_form" >    
        <div id="board_card">
            <div class="inner">
                <div class="head-line">
                    <div class="board-name">
                        <span>友情提示：</span>
                    </div>
                    <div class="board-category">
                            <span>为评审委员会更加了解贵品牌及产品，需要提交较为详尽的相关资料。建议开始填写报名资料前先浏览整个表格提前准备好相关资料:-)</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="tabcon" style="padding: 40px;">
            <div class="kong" style="-webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);-moz-box-shadow: 0 0 4px rgba(0,0,0,.2); box-shadow: 0 0 4px rgba(0,0,0,.2);font-size: 16px;padding: 40px 40px 40px 0px;overflow: hidden;">
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>姓名
                        </label>
                        <div class="col-sm-10">
                        	<input type="text" class="form-control easyui-validatebox " data-options="required:true,missingMessage:'必填项'" placeholder="请输入姓名" name="manName">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>电话
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control easyui-validatebox " data-options="required:true,missingMessage:'必填项'" placeholder="请输入电话" name="manCellphone">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>邮箱
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control easyui-validatebox " data-options="required:true,missingMessage:'必填项'" placeholder="请输入邮箱" name="manEmail">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>微信号
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control easyui-validatebox " data-options="required:true,missingMessage:'必填项'" placeholder="请输入微信号" name="manWeixin">
                        </div>
                    </div>
					<div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;"></span>
                            推荐人/推荐机构
                        </label>
                        <div class="col-sm-10">
                            <input type="text" name="introducer" class="form-control" placeholder="从何处得知意匠集信息？">
                        </div>
                    </div>
            </div>
        </div>
        <div class="tabcon" style="padding: 40px;">
            <div class="kong" style="-webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.2);
    box-shadow: 0 0 4px rgba(0,0,0,.2);font-size: 16px;padding: 40px 40px 40px 0px;overflow: hidden;">
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>公司名称
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control easyui-validatebox " data-options="required:true,missingMessage:'必填项'" placeholder="请输入公司名称,未注册公司填[无]" name="manCompany">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>品牌名称
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control easyui-validatebox " data-options="required:true,missingMessage:'必填项'" placeholder="请输入品牌名称" name="manBrand">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span> 品牌简介
                        </label>
                        <div class="col-sm-10">
                            <textarea name="manBrandinfo"   class="form-control easyui-validatebox " data-options="required:true,missingMessage:'必填项'" placeholder="请输入品牌简介,100字到500字之间"></textarea>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>品牌logo
                        </label>
                        <div class="col-sm-10">
                            <div>
                                <dl>
                                    <dd id="localImagId" style="position: relative;"class="file_config_upimg">
                                        <img src="" alt="" id="previewcover">
                                        <div>
                                            <span class="file_config_isView">点击上传</span>
                                            <input class="file_config_isView" type="file" name="pic_manBrandLogo" id="pic_manBrandLogo" onchange="javascript:setImagePreview(this,localImagId,previewcover,'150px','170px','pic_manBrandLogo','manBrandLogo');">
                                        	<input type="hidden" name="manBrandLogo" id="manBrandLogo">
                                        </div>
                                    </dd>
                                </dl>
                                
                                <dl class="file_config_isView">
                                    <dd>
                                        <p class="file_config_msg_instructions">仅支持jpeg、jpg、png、bmp格式，大小不超过5M</p>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;"></span>宣传视频链接
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入宣传视频链接" name="manCompanyvedio">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;"></span>官方网站
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入官方网站" name="manHaswebsite">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;"></span>官方微博
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入官方微博" name="manCompanyweibo">
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;"></span>微信公众号
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入微信公众号" name="manCompanyweixin">
                        </div>
                    </div>
            </div>
        </div>
        
        <c:forEach begin="1" end="3"  step="1" var="item">
			<div class="tabcon" style="padding: 40px;">
            	<div class="kong" style="-webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);-moz-box-shadow: 0 0 4px rgba(0,0,0,.2);box-shadow: 0 0 4px rgba(0,0,0,.2);font-size: 16px;padding: 40px 40px 40px 0px;overflow: hidden;">
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>
							产品${item }名称
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control easyui-validatebox " data-options="required:true,missingMessage:'必填项'" placeholder="请输入产品名称" name="productnames"  data-options="required:true,missingMessage:'必填项'" >
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>
							产品${item }售价
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control easyui-validatebox " data-options="required:true,missingMessage:'必填项'" placeholder="请输入产品售价" name="productprices">
                        </div>
                    </div>
                    <!-- 产品图片 -->
                    <c:forEach begin="1" end="3"  step="1" var="tmp">
                     	<div class="form-group has-feedback">
	                        <label class="col-sm-2 control-label" style="font-size: 14px;">
	                            <span style="color: red;font-size: 16px; font-weight: bold;">*</span>
								产品${item }图片${tmp}
	                        </label>
	                        <div class="col-sm-10">
	                            <div>
	                                <dl>
	                                    <dd id="localImagId${item}${tmp}" style="position: relative;"class="file_config_upimg">
	                                        <img src="" alt="" id="previewcover${item}${tmp}">
	                                        <div>
	                                            <span class="file_config_isView">点击上传</span>
	                                            <input class="file_config_isView" type="file" name="productimgs${item}" id="productimgs${item}${tmp}" onchange="javascript:setImagePreview(this,localImagId${item}${tmp},previewcover${item}${tmp},'150px','170px','productimgs${item}${tmp}','imgId${item}${tmp}');">
	                                        	<input type="hidden" name="imgIds${item}" id="imgId${item}${tmp}">
	                                        </div>
	                                    </dd>
	                                </dl>
	                                <dl class="file_config_isView">
	                                    <dd>
	                                        <p class="file_config_msg_instructions">仅支持jpeg、jpg、png、bmp格式，大小不超过5M</p>
	                                    </dd>
	                                </dl>
	                            </div>
	                        </div>
	                    </div>
                    </c:forEach>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label" style="font-size: 14px;">
                            <span style="color: red;font-size: 16px; font-weight: bold;"></span>
							 产品${item }链接
                        </label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control"  placeholder="请输入产品${item }链接" name="productlinks">
                        </div>
                    </div>
        		</div>
        	</div>
		</c:forEach>
        
        <div class="tabcon" style="padding: 40px;">
            <div class="kong" style="-webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);-moz-box-shadow: 0 0 4px rgba(0,0,0,.2);box-shadow: 0 0 4px rgba(0,0,0,.2);font-size: 16px;padding: 40px 40px 40px 0px;overflow: hidden;">
                <input type="button" value="提交" class="button-submit" onclick="subfunc()">
            </div>
        </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="/static/miind/script/layer.js"></script>
<script type="text/javascript" src="${staticPath }/static/ajaxfileupload.js" charset="utf-8"></script>
<script type="text/javascript" src="${staticPath }/static/jquery.form.js" charset="utf-8"></script>


<script type="text/javascript">
function ajaxFileUpload(fileId,imgfileid) {
    var fileObj = document.getElementById(fileId).files[0];
    var FileController = "upload";
    var form = new FormData();
    form.append("file", fileObj);
    var xhr = new XMLHttpRequest();
    xhr.open("post", FileController, true);
    xhr.onload = function () {
    	  if (xhr.readyState == 4) {
              //当XHR的状态为4时判断请求成功与否，然后处理响应的数据，虽然当XHR的状态为2或者3时可以获取到响应状态，但是此时的数据还未下载完全，不能处理响应数据
              if (xhr.status == 200) {
                  //请求成功，处理响应数据
                 var type=xhr.responseText;
		         jsonobj=eval('('+type+')');
		         if(jsonobj.success){
		        	 if("manBrandLogo"==imgfileid){
			        	 $("#"+imgfileid).val(jsonobj.imgpath);
			         }else{
			        	 $("#"+imgfileid).val(jsonobj.imgid);
			         }
		         }else{
		        	 $.messager.alert(jsonobj.msg);
		         }
              } else {
                  //请求失败
         		  $.messager.alert("Warning","图片上传失败");
              }
          }
    };
    xhr.send(form);
}


	function subfunc(){
		$('#edit_form').submit();
	}
 	$(function() {
        $('#edit_form').form({
            url : '${path}/miiiind/save',
            onSubmit : function() {
                progressLoad();
                var isValid = $(this).form('validate');
                if (!isValid) {
                    progressClose();
                }
                return isValid;
            },
            success : function(result) {
                progressClose();
                result = $.parseJSON(result);
                if (result.success) {
				layer.open({
					type: 1,		//页面层
					title:false,  //不显示title
					closeBtn: false,
					//area: '500px',  宽度500px
					btn: ['意匠集介绍', '确定'],
					btnAlign:'c',		//按钮居中
					yes: function(){
						window.location.href="http://mp.weixin.qq.com/s?__biz=MzI0NTQ0MzUxNg==&mid=100000463&idx=1&sn=450954fb59826badf8083a32809b89bb&chksm=694f3c1c5e38b50aa75c4942d19bdceb0862a37bd9fba996b1a53df3b85bdd6a00526aca5acd&mpshare=1&scene=1&srcid=0711kkSfponsAwFCyAM7WQmK#rd"; //关闭后返回首页
					}, no: function(){
						layer.close(index); //关闭后关闭页面
					},
					shadeClose: false, //点击遮罩不关闭
					content: '<div style="padding: 30px 50px 30px 50px;text-align:center; line-height: 24px;letter-spacing: 2px; background-color: #393D49; color: #fff; font-weight: 300;">提交成功，请等待审核<br>感谢您报名意匠集</div>',
					end: function () {
						location.reload();
					}
				});
                } else {
                    var form = $('#edit_form');
                    alert(result.msg);
                }
            }
        });
    });
	//检查图片的格式是否正确,同时实现预览  
    function setImagePreview(obj, localImagId, imgObjPreview,maxwidth,maxheight,fileid,imgfileid) {  
        var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上传的文件类型  
        if (obj.value == '') {  
            $.messager.alert("Warning","让选择要上传的图片!");
            return false;
        }else {
        	if(obj.files[0].filesize>1024*1024*5){
      		  $.messager.alert('Warning','图片最大不能超过5M，请重新选择!');
      		  return false;
      		}
        	
            var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用   
            ////布尔型变量  
            var isExists = false;  
            //循环判断图片的格式是否正确  
            for (var i in array) {  
                if (fileContentType.toLowerCase() == array[i].toLowerCase()) {  
                    //图片格式正确之后，根据浏览器的不同设置图片的大小  
                    if (obj.files && obj.files[0]) {  
                        //火狐下，直接设img属性   
                        imgObjPreview.style.display = 'block';  
                        imgObjPreview.style.width = maxwidth;  
                        imgObjPreview.style.height = maxheight;  
                        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式   
                        imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);  
                    }  
                    else {  
                        //IE下，使用滤镜   
                        obj.select();  
                        var imgSrc = document.selection.createRange().text;  
                        //必须设置初始大小   
                        localImagId.style.width = maxheight;  
                        localImagId.style.height = maxheight;  
                        //图片异常的捕捉，防止用户修改后缀来伪造图片   
                        try {  
                            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
                            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
                        }  
                        catch (e) {  
                        	$.messager.alert("Warning","您上传的图片格式不正确，请重新选择!");  
                            return false;
                        }  
                        imgObjPreview.style.display = 'none';  
                        document.selection.empty();  
                    }
                    
                    isExists = true;
                    ajaxFileUpload(fileid,imgfileid);
                    return true;  
                }  
            }  
            if (isExists == false) {  
            	$.messager.alert("Warning","上传图片类型不正确!");  
                return false;  
            }
            return false;  
        }  
    }
	</script>